<template>
  <div>
    <el-form :model="queryParam" ref="queryParam" inline class="demo-form-inline">
      <el-form-item label="名称" prop="name">
        <el-input v-model="queryParam.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="queryParam.phoneNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item style="flex: 1;" label="消费行为" prop="consumerBehavior">
        <el-select v-model="queryParam.consumerBehavior" filterable placeholder="请选择">
          <el-option
            v-for="item in consumerBehaviorOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="flex: 1;" label="来源" prop="sourceType">
        <el-select v-model="queryParam.sourceType" filterable placeholder="请选择">
          <el-option
            v-for="item in sourceTypeOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间:" prop="timespan">
        <el-date-picker
          v-model="queryParam.timespan"
          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="look_btn" type="primary" @click="getList()">查询</el-button>
        <el-button @click="resetForm('queryParam')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div class="boxcard-head"></div>
          <div class="boxcard-body">
            <el-table
              :data="list"
              style="width: 100%;"
              row-key="id"
              :header-cell-style="{ 'background-color': '#EEEEEE' }"
            >
              <el-table-column prop="photoUrl" label="头像" width="100">
                <template slot-scope="scope">
                  <img :src="scope.row.photoUrl" width="80" height="80" />
                </template>
              </el-table-column>
              <el-table-column label="ID" width="90" prop="id"></el-table-column>
              <el-table-column label="姓名" width="180" prop="name"></el-table-column>
              <el-table-column label="手机号" width="180" prop="tel"></el-table-column>
              <el-table-column label="状态" width="180" prop="status">
                <template slot-scope="scope">{{ scope.row.status==0?"活跃":"潜水" }}</template>
              </el-table-column>
              <el-table-column label="来源" width="180" prop="sourceType">
                <template
                  slot-scope="scope"
                >{{ getSourceType(scope.row.sourceType)}}-{{scope.row.sourceTypeName}}</template>
              </el-table-column>
              <el-table-column label="会员等级" width="180" prop="memberLevel">
                <template slot-scope="scope">{{ memberLevels[scope.row.memberLevel] }}</template>
              </el-table-column>
              <el-table-column label="介绍人名称" width="180" prop="recommenderName"></el-table-column>
              <el-table-column label="介绍人Id" width="180" prop="recommender"></el-table-column>
              <el-table-column prop="recommendNum" label="总宣传数" width="60" show-overflow-tooltip></el-table-column>
              <el-table-column label="累计消费" width="180" prop="allTotal"></el-table-column>
              <el-table-column label="累计积分" width="180" prop="totalCredits"></el-table-column>
              <el-table-column label="积分余额" width="180" prop="availableCredits"></el-table-column>
              <el-table-column label="注册日期" width="180" prop="registDate"></el-table-column>
              <el-table-column label="最后一次下单时间" width="180" prop="latestOrderDate"></el-table-column>
              <el-table-column label="操作" fixed="right" width="180">
                <template slot-scope="scope">
                  <!-- <el-button type="text" size="small" @click="toOrder(scope.row)">订单</el-button> -->
                  <el-button type="text" size="small" @click="creditsflowDialog(scope.row)">积分流水</el-button>
                  <el-button type="text" size="small" @click="recommenderDialog(scope.row)">推荐人</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="customerConsumer(scope.row,'order')"
                  >订单记录</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="customerConsumer(scope.row,'doctorOrder')"
                  >咨询订单记录</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :page-sizes="page.pageSizes"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div>
      <creditsflow v-bind:id="id" v-bind:visible.sync="creditsflowVisable"></creditsflow>
      <recommender v-bind:visible.sync="recommenderVisable" ref="recommender"></recommender>
      <customerConsumer v-bind:visible.sync="customerConsumerVisable" ref="customerConsumer"></customerConsumer>
    </div>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
import creditsflow from "./creditsflow";
import recommender from "./recommender";
import customerConsumer from "./customerConsumer";

export default {
  components: { creditsflow, recommender,customerConsumer },
  data() {
    return {
      formLabelWidth: "100px",
      list: [],
      queryParam: {
        name: null,
        phoneNumber: null,
        sourceType: null,
        consumerBehavior: null,
        timespan: []
      },
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50]
      },
      memberLevels: {
        0: "注册用户",
        1: "普通会员",
        2: "银卡会员",
        3: "金卡会员",
        4: "钻石会员"
      },
      projectOptions: [],
      recommenderVisable: false,
      creditsflowVisable: false,
      customerConsumerVisable: false,
      id: "",
      idRecommender: "",
      sourceTypeOptions: [
        { key: 1, label: "医生" },
        { key: 2, label: "分销商" },
        { key: 3, label: "客户" },
        { key: 4, label: "门店" },
        { key: 5, label: "筛查活动" }
      ],
      consumerBehaviorOptions: [
        { key: 1, label: "三个月内有消费" },
        { key: 2, label: "三个月内无消费" }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getList();
    },
    getList() {
      let startDate, endDate;
      if (this.queryParam.timespan && this.queryParam.timespan.length > 0) {
        startDate = this.queryParam.timespan[0];
        endDate = this.queryParam.timespan[1];
      }
      this.$https
        .get("/customer/pageCustomer", {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          name: this.queryParam.name,
          phoneNumber: this.queryParam.phoneNumber,
          sourceType: this.queryParam.sourceType,
          consumerBehavior: this.queryParam.consumerBehavior,
          startDate: startDate,
          endDate: endDate
        })
        .then(res => {
          this.list = res.data.data.list;
          this.page.total = Number.parseInt(res.data.data.total);
          this.page.currentPage = res.data.data.pageNum;
        });
    },
    getSourceType(type) {
      for (let i = 0; i < this.sourceTypeOptions.length; i++) {
        if (type === this.sourceTypeOptions[i].key) {
          return this.sourceTypeOptions[i].label;
        }
      }
    },
    creditsflowDialog(row) {
      this.creditsflowVisable = true;
      this.id = row.id;
    },
    recommenderDialog(row) {
      this.recommenderVisable = true;
      // this.idRecommender = row.id;
      this.$refs.recommender.initRecommender(row.id, "customer");
    },
    customerConsumer(row, type) {
      this.customerConsumerVisable = true;
      this.$refs.customerConsumer.initList(row.id, type);
    },
    toOrder(row) {
      this.$router.push({
        name: "/order",
        query: {
          customerId: row.id
        }
      });
    },
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
        if (formName == "queryParam") {
          this.getList();
        }
      }
    }
  }
};
</script>

<style lang="less"></style>
